<template>
	<view>
		<view class="login-form">
			<input type="text" class="input-row" v-model="account" maxlength="11" placeholder="请输入账号" />
			<input type="password" class="input-row" v-model="password" maxlength="11" placeholder="请输入密码" />
			<button type="button" class="btn login-btn" @click="handleLogin">登录</button>
			<view class="bot flex-box">
				<navigator class="sign" hover-class="none">立即注册</navigator>
				<navigator class="forget" hover-class="none">忘记密码?</navigator>
			</view>
		</view>
	</view>
</template>

<script>
import { mapActions, mapGetters } from 'vuex';

export default {
  data() {
    return {
      account: '',
      password: '',
    };
  },
  computed: {
    ...mapGetters(['loggedInUser']),
  },
  methods: {
    ...mapActions(['login', 'logout']),
    handleLogin() {
      if (!this.account) {
        this.alert("请输入账号!");
        return false;
      }
      if (!this.password) {
        this.alertModal("请输入密码！");
        return false;
      }
      const account = this.account.trim();
      const password = this.password.trim();
      if (password.length < 6) {
        this.alert("密码不能小于6个字符！");
        return false;
      }

      if (account === '123' && password === '123456') {
        this.login(account); // 使用 Vuex 的 login action
		 console.log('Logged in user:', this.loggedInUser);
        uni.showToast({
          title: '登录成功',
          icon: 'success',
        });
        uni.switchTab({
          url: '/pages/index/index',
        });
      } else {
        this.alert("账号或密码错误！");
      }
    },
    alertModal(msg) {
      uni.showModal({
        content: msg,
        showCancel: false,
      });
    },
    alert(msg) {
      uni.showToast({
        icon: 'none',
        title: msg,
      });
    },
    mounted() {
      // 检查 Vuex 中是否有已登录的用户
      if (this.loggedInUser) {
        this.account = this.loggedInUser;
        // 这里可以添加更多逻辑，比如自动跳转到首页等
      }
    },
  },
};
</script>

<style lang="scss">
	.input-row {
		width: 600rpx;
		height: 75rpx;
		margin: 0 auto;
		border: 1px solid #E04B28;
		color: #6c6c6c;
		border-radius: 75rpx;
		padding: 0 50rpx;
		line-height: 75rpx;
		margin-bottom: 45rpx;
		font-size: 26rpx;
	}

	.login-form {
		padding-top: 220rpx;
	}

	.login-btn {
		width: 600rpx;
		height: 75rpx;
		margin: 0 auto;
		border: 1px solid #E04B28;
		border-radius: 75rpx;
		padding: 0 50rpx;
		line-height: 75rpx;
		margin-bottom: 45rpx;
		font-size: 26rpx;
		color: #fff;
		background: #E04B28;
	}

	.bot {
		width: 600rpx;
		padding: 0 17rpx;
		font-size: 26rpx;
		margin: 0 auto;
		justify-content: space-between;
	}

	.sign {
		color: #E04B28;
	}

	.auth-row {
		display: flex;
		flex-direction: row;
		justify-content: center;
		position: absolute;
		bottom: 100rpx;
		left: 0;
		width: 100%;

		.auth-image {
			width: 50px;
			height: 50px;
			border: 1px solid #dddddd;
			border-radius: 50px;
			margin: 0 20px;
			background-color: #ffffff;
			overflow: hidden;
		}

		.img {
			width: 30px;
			height: 30px;
			margin: 10px;
		}

		input {
			outline: none;
			border: none;
			list-style: none;
		}
	}

	.log-btn {
		margin: 0;
		padding: 0;
		background: #fff !important;
		height: 48px;

		&::after {
			background-color: transparent;
			margin: 0;
			padding: 0;
			border: 0;
		}
	}
</style>